
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"content="width=device-width;" >
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/exporting.js"></script>
    <script type="text/javascript">
        
        
        Highcharts.theme = {
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            chart: {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                    stops: [
                            [0, 'rgb(255, 255, 255)'],
                            [1, 'rgb(240, 240, 255)']
                            ]
                },
                borderWidth: 1,
                plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                plotShadow: true,
                plotBorderWidth: 1
            },
            title: {
                style: {
                    color: '#000',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                style: {
                    color: '#666666',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            xAxis: {
                gridLineWidth: 1,
                step:60,
                lineColor: '#000',
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                        
                    }
                }
            },
            yAxis: {
                minorTickInterval: 'auto',
                lineColor: '#000',
                lineWidth: 1,
                tickWidth: 1,
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: 'black'
                    
                },
                itemHoverStyle: {
                    color: '#039'
                },
                itemHiddenStyle: {
                    color: 'gray'
                }
            },
            labels: {
                style: {
                    color: '#99b'
                }
            },
            
            navigation: {
                buttonOptions: {
                    theme: {
                        stroke: '#CCCCCC'
                    }
                }
            }
        };
        
  var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
        
    Highcharts.setOptions({
        global: {
            useUTC: true
        }
    });
        
        
    function updateData(x,y,i)
    {
            
        var series = chart.series[0];
        
                
        series.addPoint([x, y], false, false);
        
        if(i == 1200){
            
            chart.xAxis[0].options.labels.step = 60;
            chart.xAxis[0].options.labels.type = 'datetime';
            chart.xAxis[0].options.labels.formatter = Highcharts.dateFormat('%H:%M', x);
            chart.xAxis[0].redraw;
            chart.redraw();
        }
      
        
    }
        
    var newData;
        
    var chart;
    $(function() {
      
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_spline', //图表放置的容器，DIV
                defaultSeriesType: 'spline', //图表类型为曲线图
                zoomType: 'x',
                width: 1350,
                //height:300

            },
                                     
            plotOptions: {
                spline: {
                          lineWidth: 1.5,
                          fillOpacity: 0.1,
                           marker: {
                            enabled: false,
                              states: {
                               hover: {
                               enabled: false,
                                  radius: 2
                                     }  
                                     }  
                                     },  
                                     shadow: false  
                                     }  
                                     },
            title: {
                text: '胎心图'  //图表标题
            },
                                     
                                   
            xAxis: { //设置X轴
                type: 'datetime',  //X轴为日期时间类型
                //tickInterval: 1000,
                tickPixelInterval: 2 //X轴标签间隔
                      },
            yAxis: { //设置Y轴
                title: '',
                max: 200, //Y轴最大值
                min: 40 , //Y轴最小值
                minorTickInterval: 10,//最小刻度
               tickPixelInterval:20//刻度间隔

            },
//            tooltip: {//当鼠标悬置数据点时的提示框
//                formatter: function() { //格式化提示信息
//                    return '<b>温度</b><br/>'+
//                    Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+ 
//                    Highcharts.numberFormat(this.y, 2)+'℃';
//                }
//            },
            legend: {
                enabled: false  //设置图例不可见
            },
            exporting: {
                enabled: false  //设置导出按钮不可用
            },
            credits: {
                text: '', //设置LOGO区文字
                href: '' //设置LOGO链接地址
            },
         series: [{
                  data: (function() { //设置默认数据，这里是假数据，如果有真数据可以在页面加载时候用真数据替换掉
                         var data = [],
                         time = (new Date()).getTime(),
                         i;
                         
                         for (i = -19; i <= -17; i++) {
                         data.push({
                                   x: time + i * 1000,
                                   y: 130
                                   });
                         }
                         return data;
                         })()
                  }]
        });
    });
    </script>
    </head>

    <body>

        <div id="main">
            <h2 class="top_title">胎心图</h2>
         
            <div id="chart_spline" ></div>
        </div>
    </body>
</html>
